import {useDispatch} from 'react-redux'
import {addTodo} from '../../redux/todoSlice'
import './index.css'

export default function Header() {
  const dispatch = useDispatch()

  function handleKeyUp(e) {
    const {key, target} = e
    if (key === 'Enter') {
      if (target.value.trim() === '') {
        alert('请输入内容！')
      } else {
        const todoObj = {id: new Date().getTime(), name: target.value, done: false}
        dispatch(addTodo(todoObj))
        target.value = ''
      }
    }
  }

  return (
    <div className="todo-header">
      <input type="text" onKeyUp={handleKeyUp} placeholder="请输入任务名称，按回车键确认"/>
    </div>
  )
}
